<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="content">支付中心</block>
		</cu-custom>
		<scroll-view scroll-y="true">
			<view>
				<view class="payInfo shadow">
					<view class="payMoney">
						<text class="text-price text-orange">{{order.orderTotalFee}}</text>
					</view>
					<view class="payLabel">
						<view class="orderId ">
							<text>订单编号：</text>
							<text>{{order.orderId}}</text>
						</view>
						<view class="orderCreateTime padding-bottom">
							<text>创建时间：</text>
							<text v-if="'1' == orderType">{{1900 + order.orderCreateTime.year}}年{{1+order.orderCreateTime.month}}月{{order.orderCreateTime.date}}日</text>
							<text style="margin-left: 10upx;" v-if="'1' == orderType">{{order.orderCreateTime.hours}}:{{order.orderCreateTime.minutes}}</text>
							<text v-if="'2' == orderType">{{this.hOrderCreateTime}}</text>
							
							
						</view>
					</view>
				</view>
				<view class="payWayInfo">
					<view class="payWayLabel bg-olive">
						<text class="cuIcon-pay" style="margin-right: 10upx;"></text>
						支付方式
					</view>
					<view class="payWayContent">
						<!-- <radio-group name="">
							<label>
								<radio :value="" /><text></text>
							</label>
							<label>
								<radio :value="" /><text></text>
							</label>
						</radio-group> -->
						<radio-group name="" style="width: 100%;" @change="choosePayWayHandler">
							<view class="payWayItem" v-for="(payWay,index) in payWays">
								<view class="payWayDesc">
									<image :src="payWay.icon" style="width: 70upx;height: 70upx;" mode=""></image>
									<view style="font-size: 16px; padding-top: 10upx; margin-left: 15upx;">{{payWay.name}}</view>
								</view>

								<view class="payWayChoose">
									<label class="radio">
										<radio :value="payWay.id" color="#39B54A" />
									</label>
								</view>
							</view>
						</radio-group>
					</view>
				</view>


				<view class="payButton">
					<button class="cu-btn round lg bg-green shadow" style="width: 500upx;" @click="doPay">立即支付</button>
				</view>



			</view>
		</scroll-view>
		<PayBoard :showBoard="showBoard" :priceText="order.orderTotalFee" @closeBorad="handleModel" @complete="inputComplete"></PayBoard>

	</view>
</template>

<script>
	import {
		getOrderByOrderId,
		updateOrderStatusToSuccess
	} from '../../api/orderAPI.js'
	import {
		getHOrderByOrderId,
		updateHOrderStatusToSuccess
	} from '../../api/hOrderAPI.js'
	import PayBoard from '@/components/xiaojia-keyBoard/xiaojia-keyBoard.vue'
	export default {
		components: {
			PayBoard
		},
		data() {
			return {
				order: {
					orderId: "G202006272829",
					orderConsignee: "",
					orderTel: "",
					orderGoodsId: "",
					orderOutletsId: "",
					orderTotalFee: "328",
					orderBuyCount: 1,
					orderScore: "",
					orderCreateTime: ''
				},
				orderType: '',
				payWays: [{
						id: "1",
						name: "BCU一卡通",
						icon: '../../static/schoolCard.png'
					},
					// {
					// 	id: "2",
					// 	name: "2306 Wallet",
					// 	icon:'../../static/2306Wallet.png'
					// },
					// {
					// 	id: "2",
					// 	name: "八戒付",
					// 	icon:'../../static/pig.png'
					// },
					{
						id: "2",
						name: "支付宝",
						icon: '../../static/aliPay.png'
					},
					{
						id: "3",
						name: "微信支付",
						icon: '../../static/weChatPay.png'
					},
					{
						id: "4",
						name: "银联支付",
						icon: '../../static/unionPay.png'
					}
				],
				choosePayWay: '',
				showBoard: false,
			}
		},
		methods: {
			choosePayWayHandler(event) {
				console.log(event.detail.value)
				this.choosePayWay = event.detail.value
			},
			doPay() {
				if (1 == this.choosePayWay) {
					this.showBoard = true
					console.log("ok: ");
				} else {
					uni.showModal({
						title: '提示',
						content: '当前支付方式暂未开通',
						showCancel: false
					})
				}

			}, //关闭密码输入框
			handleModel() {
				this.showBoard = false
			},
			// 输入密码完成，支付并修改订单状态
			inputComplete(value) {
				console.log(value)
				uni.showLoading({
					title: "正在请求支付"
				})
				this.showBoard = false
				setTimeout(() => {
					if ('1' == this.orderType) {
						this.changeGoodsOrderStatus()
					}
					if ('2' == this.orderType) {
						this.changeHotelOrderStatus()
					}
				}, 3000)
			},
			changeGoodsOrderStatus(){
				updateOrderStatusToSuccess(this.order.orderId).then(resp => {
					if ("success" == resp.result) {
						uni.hideLoading()
						uni.showToast({
							title: "支付成功",
							icon: 'success',
							duration: 3000
						})
						uni.redirectTo({
							url: '../paySuccess/paySuccess'
						})
					} else {
						uni.showToast({
							title: "服务器遇到问题",
							icon: 'none',
							duration: 3000
						})
					}
				})
			},
			changeHotelOrderStatus(){
				updateHOrderStatusToSuccess(this.order.orderId).then(resp => {
					if ("success" == resp.result) {
						uni.hideLoading()
						uni.showToast({
							title: "支付成功",
							icon: 'success',
							duration: 3000
						})
						uni.redirectTo({
							url: '../paySuccess/paySuccess'
						})
					} else {
						uni.showToast({
							title: "服务器遇到问题",
							icon: 'none',
							duration: 3000
						})
					}
				})
			}
		},
		onLoad(params) {
			console.log("params: ", params);
			let orderId = params.id;

			// orderType
			// 1.普通商品订单
			// 2.民宿订单
			let orderType = params.type
			this.orderType = orderType

			if (null == orderId) {
				orderId = "G20191021165150678"
			}

			if (null == orderId) {
				uni.showToast({
					icon: 'none',
					title: '支付参数有误'
				})
				uni.navigateBack({
					animationDuration: 2000
				})
			}
			if ('1' == orderType) {
				getOrderByOrderId(orderId).then(resp => {
					console.log(resp)
					this.order = resp
				})
			}

			if ('2' == orderType) {
				getHOrderByOrderId(orderId).then(resp => {
					this.order.orderId = resp.hOrderId,
					this.hOrderCreateTime = resp.hOrderCreateTime
					this.order.orderTotalFee = resp.hTotalPrice
				})
			}

		}
	}
</script>

<style>
	@import url("./pay.css");
</style>
